import React, {memo, useEffect, useState, useRef} from 'react'
import {Button, Space, message, Tabs, Tag, Popconfirm} from 'antd'
import type {ColumnsType} from 'antd/es/table'
import {history, connect, useModel} from 'umi'
import {uploadFileUrl} from '@/service/common/upload'
import styles from './index.less'
import SearchForm from '@/components/SearchForm'
import CustomTable from '@/components/Table'
import BatchUpload from './components/BatchUpload'
import BatchUploadImg from './components/BatchUploadImg'
import {downloadDocumentUrl} from '@/service/common/download'
import {
	getTableList,
	importCheck,
	importSave,
	getErrorList,
	getXZCarTypeList,
	importBatchImg,
	updateStatus,
	syncData,
} from '@/service/carMessage/list'
import {getCompany} from '@/service/system/company'
import {modelSeriesFun, translateDataToTree} from '@/utils/common/index'
import 'moment/locale/zh-cn'
import {
	operationType,
	carStatus,
	violationStatus,
	repairStatus,
	motStatus,
	maintenanceStatus,
	commercialInsuranceStatus,
	compulsoryInsuranceStatus,
	carrierInsuranceStatus,
	compliance,
	complianceStatus,
	isCarHailingCheck,
	onlineCarLicenseStatus,
	carLicenseStatus,
	vehicleStatus,
} from '../dict'
import Permissions from '@/components/Permissions'
import {getHolderDictInfo} from '@/service/common'

const formItemLayout = {
	labelCol: {flex: '100px'},
	wrapperCol: {flex: '1'},
}

const listDom = memo(
	(props: {
		user: {userId: string; userName: string; orgId: string | number}
	}) => {
		const {initialState} = useModel('@@initialState')
		const {fileName} = initialState || {}
		const [tabsKey, setTabsKey] = useState('1')
		const [params, setParams] = useState({
			current: 1,
			size: 10,
		})

		const [total, setTotal] = useState(0)
		const [loading, setLoading] = useState(false)
		const [tableList, setTableList] = useState<any[]>([])
		const [searchData, setSearchData] = useState({})
		const [formData, setFormData] = useState<any[]>([])

		const [otherParams, setOtherParams] = useState({
			current: 1,
			size: 10,
		})

		const [otherTotal, setOtherTotal] = useState(0)
		const [otherLoading, setOtherLoading] = useState(false)
		const [otherTableList, setOtherTableList] = useState<any[]>([])
		const [otherSearchData, setOtherSearchData] = useState({})
		// const [formOtherData, setOtherFormData] = useState<any[]>([])
		const [orgList, setOrgList] = useState([])
		const [carTypeList, setCarTypeList] = useState<any>([])
		// 持有方数据
		const [holderDict, setHolderDict] = useState([])
		/** 获取持有方数据 */
		const getHolderDictInfoFun = () => {
			getHolderDictInfo({type: 'holder'}).then((res: any) => {
				if (res?.success) {
					setHolderDict(res?.data)
				}
			})
		}
		useEffect(() => {
			getHolderDictInfoFun()
		}, [])

		// 批量导入车辆
		const [isModalOpen, setIsModalOpen] = useState(false)
		const [fileObj, setFileObj] = useState<any>()
		const batchColumns: any = [
			{
				title: '车牌号',
				dataIndex: 'number',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '车架号',
				dataIndex: 'vin',
				align: 'center',
				width: 140,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '品牌车系车型',
				dataIndex: 'fashionName',
				align: 'center',
				width: 250,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '车辆状态',
				dataIndex: 'carStatus',
				align: 'center',
				width: 150,
				render: (text: any) => <Tag color="processing">{text}</Tag>,
			},

			{
				title: '持有方',
				dataIndex: 'holder',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '所属公司',
				dataIndex: 'org',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '所有人',
				dataIndex: 'owner',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '城市',
				dataIndex: 'city',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '运营分类',
				dataIndex: 'operationType',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '是否自营',
				dataIndex: 'selfManaged',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '资产所有方',
				dataIndex: 'assertsOwnerName',
				align: 'center',
				width: 140,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '车牌性质',
				dataIndex: 'carProperty',
				align: 'center',
				width: 250,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '发动机号',
				dataIndex: 'engineNumber',
				align: 'center',
				width: 150,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '车辆星级',
				dataIndex: 'starRating',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '验车入库时间',
				dataIndex: 'checkTime',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '是否气瓶检车辆',
				dataIndex: 'isGasCylinderCar',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '当前里程数',
				dataIndex: 'mileages',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '行驶证编号',
				dataIndex: 'licenseNo',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '行驶证注册日期',
				dataIndex: 'licenseRegisterTime',
				align: 'center',
				width: 250,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '行驶证到期日期',
				dataIndex: 'motExpirationTime',
				align: 'center',
				width: 150,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '是否符合网约车',
				dataIndex: 'compliance',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '网约车运输证号',
				dataIndex: 'carHailingLicNo',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '网约车发证日期',
				dataIndex: 'carHailingRegisterTime',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '网约车证有效期',
				dataIndex: 'carHailingValidTime',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '运营检日期',
				dataIndex: 'carHailingInspectionTime',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '网约车证初审申请日期',
				dataIndex: 'carHailingFirstApplyTime',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '网约车证复审同通过日期',
				dataIndex: 'carHailingSecondApproveTime',
				align: 'center',
				width: 240,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '网约车证所有人',
				dataIndex: 'carHailingOwner',
				align: 'center',
				width: 250,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '网约车证签发机关',
				dataIndex: 'carHailingIssuing',
				align: 'center',
				width: 150,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '供应商',
				dataIndex: 'supplier',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '合同编号',
				dataIndex: 'contractNo',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '招标编号',
				dataIndex: 'biddingNo',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '采购申请单号',
				dataIndex: 'purchaseNo',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '车辆颜色',
				dataIndex: 'color',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '车辆类型',
				dataIndex: 'type',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '生产日期',
				dataIndex: 'productionTime',
				align: 'center',
				width: 140,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '质保到期日期',
				dataIndex: 'qaExpireDate',
				align: 'center',
				width: 150,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '座椅材质',
				dataIndex: 'seatMaterial',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '内饰颜色',
				dataIndex: 'interiorColor',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '使用性质',
				dataIndex: 'useCharacter',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '车体类型',
				dataIndex: 'category',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '车身高度',
				dataIndex: 'height',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '车体宽度',
				dataIndex: 'width',
				align: 'center',
				width: 250,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '车身长度',
				dataIndex: 'length',
				align: 'center',
				width: 150,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '轴距',
				dataIndex: 'wheelbase',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '发动机排量',
				dataIndex: 'displacement',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '购置税',
				dataIndex: 'purchaseTax',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '备车流程编号',
				dataIndex: 'carPrepareNo',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '采购价格',
				dataIndex: 'purchasePrice',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '首次发车时间',
				dataIndex: 'firstDepartureTime',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '气瓶检到期日期',
				dataIndex: 'gasExpirationTime',
				align: 'center',
				width: 140,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '最晚验车入库时间',
				dataIndex: 'lastCheckTime',
				align: 'center',
				width: 250,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '到期日',
				dataIndex: 'carExpirationTime',
				align: 'center',
				width: 150,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '入库里程数',
				dataIndex: 'stockInDistance',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '仓库ID',
				dataIndex: 'warehouseId',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '仓库类型',
				dataIndex: 'warehouseType',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '仓库名称',
				dataIndex: 'warehouseName',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '车辆注册状态',
				dataIndex: 'registerStatus',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '快车审核状态',
				dataIndex: 'auditStateExpress',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '快车审核不通过原因',
				dataIndex: 'auditReasonExpress',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '支持滴滴业务',
				dataIndex: 'supportDidiBusiness',
				align: 'center',
				width: 250,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '专车审核状态',
				dataIndex: 'auditStateTailored',
				align: 'center',
				width: 150,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '专车审核不通过原因',
				dataIndex: 'auditReasonTailored',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '网约车运输证审核结果',
				dataIndex: 'carHailingLicAuditStatus',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '网约车运输证审核失败原因',
				dataIndex: 'carHailingLicAuditReason',
				align: 'center',
				width: 220,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '滴滴是否验真',
				dataIndex: 'carHailingDidiAuditStatus',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '网约车证完成状态',
				dataIndex: 'carHailingStatus',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '错误信息',
				dataIndex: 'errorMsg',
				align: 'center',
				width: 200,
				fixed: 'right',
				render: (text: string) => <span>{text || '--'}</span>,
			},
		]

		// 批量导入车辆图片
		const [isCarImgModalOpen, setIsCarImgModalOpen] = useState(false)

		// 初始化-需求组织数据
		const getCompanyFun = () => {
			getCompany({merchantId: props?.user?.orgId}).then((res: any) => {
				if (res?.success) {
					const list = translateDataToTree(res.data)
					setOrgList(() => list as any)
				}
			})
		}

		useEffect(() => {
			getCompanyFun()
		}, [props?.user?.orgId])

		// 获取品牌车系
		const onCarTypeListFun = () => {
			getXZCarTypeList().then((res: any) => {
				if (res?.success) {
					setCarTypeList(modelSeriesFun(res.data))
				}
			})
		}
		useEffect(() => {
			onCarTypeListFun()
		}, [])

		// 获取全部车辆数据
		const onAllListFun = () => {
			setLoading(true)
			getTableList({...params, ...searchData, carStatusType: 0})
				.then((res: any) => {
					if (res?.success) {
						setTableList(() => res.data.records)
						setTotal(res.data.total)
					}
					setLoading(false)
				})
				.catch(() => {
					setLoading(false)
				})
		}

		// 获取退运车辆数据
		const onOtherListFun = () => {
			setOtherLoading(true)
			getTableList({...otherParams, ...otherSearchData, carStatusType: 1})
				.then((res: any) => {
					if (res?.success) {
						setOtherTableList(() => res.data.records)
						setOtherTotal(res.data.total)
					}
					setOtherLoading(false)
				})
				.catch(() => {
					setOtherLoading(false)
				})
		}

		// 自定义一个初始不更新的hook
		const useUpdateEffect = (fn: Function, inputs: any[]) => {
			const didMountRef = useRef(false)
			useEffect(() => {
				if (didMountRef.current) fn()
				else didMountRef.current = true
			}, inputs)
		}

		// 使用自定义hook
		useUpdateEffect(onAllListFun, [params])
		useUpdateEffect(onOtherListFun, [otherParams])

		// 更新车辆状态
		const updateStatusFun = (data: {
			carId: number
			operationStatus: number
			vehicleStatus: number
		}) => {
			updateStatus(data)
				.then((res: any) => {
					if (res?.success) {
						onAllListFun()
						message.success(res.msg)
					}
				})
				.catch((error) => {
					message.error(error)
				})
		}

		// 同步数据
		const syncDataFun = (data: {carId: number}) => {
			syncData(data)
				.then((res: any) => {
					if (res?.success) {
						onAllListFun()
						message.success(res.msg)
					}
				})
				.catch((error) => {
					message.error(error)
				})
		}
		// 全部车辆列表
		const allColumns: ColumnsType<TargetAPI.TargetColumns> = [
			{
				title: '序号',
				dataIndex: 'order',
				align: 'center',
				width: 70,
				render(text, record, index) {
					return <span>{(params.current - 1) * 10 + index + 1}</span>
				},
			},
			{
				title: '车辆ID',
				dataIndex: 'carId',
				align: 'center',
				width: 200,
				render: (text) => <span>{text || '--'}</span>,
			},
			{
				title: '车架号',
				dataIndex: 'vin',
				align: 'center',
				width: 140,
				render: (text) => <span>{text || '--'}</span>,
			},
			{
				title: '车牌号',
				dataIndex: 'number',
				align: 'center',
				width: 150,
				render: (text) => <span>{text || '--'}</span>,
			},
			{
				title: '品牌车系车型',
				dataIndex: 'fashionName',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text) => <span>{text || '--'}</span>,
			},
			{
				title: '车辆状态',
				dataIndex: 'carStatus',
				align: 'center',
				width: 150,
				render: (text: any, record: any) => (
					<>
						{carStatus?.map((tag: {key: number; label: string}) => {
							if (tag.key === text) {
								return (
									<Tag color="processing" key={record?.id}>
										{tag.label}
									</Tag>
								)
							}
							return ''
						})}
					</>
				),
			},
			{
				title: '车务状态',
				dataIndex: 'vehicleStatus',
				align: 'center',
				width: 150,
				render: (text: any, record: any) => (
					<>
						{vehicleStatus?.map(
							(tag: {key: number; label: string}) => {
								if (tag.key === text) {
									return (
										<Tag
											color="processing"
											key={record?.id}>
											{tag.label}
										</Tag>
									)
								}
								return ''
							},
						)}
					</>
				),
			},
			{
				title: '持有方',
				dataIndex: 'holderName',
				align: 'center',
				width: 200,
				render: (text) => <span>{text || '--'}</span>,
			},
			{
				title: '资产所有方',
				dataIndex: 'assertsOwnerName',
				align: 'center',
				width: 200,
				render: (text) => <span>{text || '--'}</span>,
			},
			{
				title: '所属公司',
				dataIndex: 'companyName',
				align: 'center',
				width: 150,
				render: (text) => <span>{text || '--'}</span>,
			},
			{
				title: '所有人',
				dataIndex: 'owner',
				align: 'center',
				width: 150,
				render: (text) => <span>{text || '--'}</span>,
			},
			{
				title: '城市',
				dataIndex: 'cityName',
				align: 'center',
				width: 150,
				render: (text) => <span>{text || '--'}</span>,
			},
			{
				title: '运营分类',
				dataIndex: 'operationType',
				align: 'center',
				width: 150,
				render: (text: any, record: any) => (
					<>
						{text
							? operationType?.map(
									(tag: {key: number; label: string}) => {
										if (tag.key === text) {
											return (
												<Tag
													color="processing"
													key={record?.id}>
													{tag.label}
												</Tag>
											)
										}
										return ''
									},
							  )
							: '--'}
					</>
				),
			},
			{
				title: '违章状态',
				dataIndex: 'violationStatus',
				align: 'center',
				width: 150,
				render: (text: any, record: any) => (
					<>
						{violationStatus?.map(
							(tag: {key: number; label: string}) => {
								if (Number(tag.key) === Number(text)) {
									return (
										<Tag
											color="processing"
											key={record?.id}>
											{tag.label}
										</Tag>
									)
								}
								return ''
							},
						)}
					</>
				),
			},
			{
				title: '年检状态',
				dataIndex: 'motStatus',
				align: 'center',
				width: 150,
				render: (text: any, record: any) => (
					<>
						{motStatus?.map((tag: {key: number; label: string}) => {
							if (Number(tag.key) === Number(text)) {
								return (
									<Tag color="processing" key={record?.id}>
										{tag.label}
									</Tag>
								)
							}
							return ''
						})}
					</>
				),
			},
			{
				title: '维修状态',
				dataIndex: 'repairStatus',
				align: 'center',
				width: 150,
				render: (text: any, record: any) => (
					<>
						{repairStatus?.map(
							(tag: {key: number; label: string}) => {
								if (Number(tag.key) === Number(text)) {
									return (
										<Tag
											color="processing"
											key={record?.id}>
											{tag.label}
										</Tag>
									)
								}
								return ''
							},
						)}
					</>
				),
			},
			{
				title: '保养状态',
				dataIndex: 'maintenanceStatus',
				align: 'center',
				width: 150,
				render: (text: any, record: any) => (
					<>
						{maintenanceStatus?.map(
							(tag: {key: number; label: string}) => {
								if (Number(tag.key) === Number(text)) {
									return (
										<Tag
											color="processing"
											key={record?.id}>
											{tag.label}
										</Tag>
									)
								}
								return ''
							},
						)}
					</>
				),
			},
			{
				title: '行驶证',
				dataIndex: 'carLicenseStatus',
				align: 'center',
				width: 200,
				render: (text, record: any) => (
					<>
						{record?.isDrivingLic === 0
							? '--'
							: carLicenseStatus?.map(
									(tag: {key: number; label: string}) => {
										if (Number(tag.key) === Number(text)) {
											const txt = `${tag?.label} / ${record?.licenseExpirationTime}`
											return (
												<div
													className="ellipsis"
													key={record?.id}
													title={txt}
													style={{width: 200}}>
													<Tag color="processing">
														{tag?.label}
													</Tag>
													/
													{
														record?.licenseExpirationTime
													}
												</div>
											)
										}
										return ''
									},
							  )}
					</>
				),
			},
			{
				title: '网约车证',
				dataIndex: 'onlineCarLicenseStatus',
				align: 'center',
				width: 200,
				render: (text: any, record: any) => (
					<>
						{record?.isCarHailingLic === 0
							? '--'
							: onlineCarLicenseStatus?.map(
									(tag: {key: number; label: string}) => {
										if (Number(tag.key) === Number(text)) {
											const txt = `${tag?.label} / ${record?.onlineCarExpirationTime}`
											return (
												<div
													className="ellipsis"
													title={txt}
													key={record?.id}
													style={{width: 200}}>
													<Tag color="processing">
														{tag?.label}
													</Tag>
													/
													{
														record?.onlineCarExpirationTime
													}
												</div>
											)
										}
										return ''
									},
							  )}
					</>
				),
			},
			{
				title: '是否网约车',
				dataIndex: 'compliance',
				align: 'center',
				width: 150,
				render: (text: any, record: any) => (
					<>
						{text
							? complianceStatus?.map(
									(tag: {key: number; label: string}) => {
										if (Number(tag.key) === Number(text)) {
											return (
												<Tag
													color="processing"
													key={record?.id}>
													{tag?.label}
												</Tag>
											)
										}
										return ''
									},
							  )
							: '--'}
					</>
				),
			},
			{
				title: '网约车运营检',
				dataIndex: 'isCarHailingCheck',
				align: 'center',
				width: 150,
				render: (text: any, record: any) => (
					<>
						{text
							? isCarHailingCheck?.map(
									(tag: {key: number; label: string}) => {
										if (tag.key === text) {
											return (
												<Tag
													color="processing"
													key={record?.id}>
													{tag.label}
												</Tag>
											)
										}
										return ''
									},
							  )
							: '--'}
					</>
				),
			},
			{
				title: '保险状态',
				dataIndex: 'ownerName',
				align: 'center',
				width: 150,
				render: (text) => <span>{text || '--'}</span>,
				children: [
					{
						title: '商业险信息',
						dataIndex: 'isCommercialInsurance',
						align: 'center',
						key: 'isCommercialInsurance',
						width: 150,
						render: (text: any, record: any) => (
							<>
								{commercialInsuranceStatus?.map(
									(tag: {key: number; label: string}) => {
										if (tag.key === text) {
											return (
												<span key={record?.id}>
													{tag?.label}
												</span>
											)
										}
										return ''
									},
								)}
							</>
						),
					},
					{
						title: '交强险信息',
						dataIndex: 'compulsoryInsuranceStatus',
						align: 'center',
						key: 'compulsoryInsuranceStatus',
						width: 150,
						render: (text: any, record: any) => (
							<>
								{compulsoryInsuranceStatus?.map(
									(tag: {key: number; label: string}) => {
										if (tag.key === text) {
											return (
												<span key={record?.id}>
													{tag?.label}
												</span>
											)
										}
										return ''
									},
								)}
							</>
						),
					},
					{
						title: '承责险信息',
						dataIndex: 'isCarrierInsurance',
						align: 'center',
						key: 'isCarrierInsurance',
						width: 150,
						render: (text: any, record: any) => (
							<>
								{record?.isCarrierInsurance === 0
									? '--'
									: carrierInsuranceStatus?.map(
											(tag: {
												key: number
												label: string
											}) => {
												if (tag.key === text) {
													return (
														<span key={record?.id}>
															{tag?.label}
														</span>
													)
												}
												return ''
											},
									  )}
							</>
						),
					},
				],
			},
			{
				title: '操作',
				key: 'action',
				align: 'center',
				fixed: 'right',
				width: 350,
				render: (text: any, record: any) => (
					<div>
						<Permissions permissionID="amc_assetCenter_carMessage_list_view">
							<Button
								type="link"
								size="small"
								onClick={() => {
									history.push({
										pathname: '/carMessage/list/view',
										query: {
											id: record.carId,
											operationType: record.operationType,
											vin: record.vin,
										},
									})
								}}>
								详情
							</Button>
						</Permissions>
						<Permissions permissionID="amc_assetCenter_carMessage_list_sync">
							<Popconfirm
								placement="topLeft"
								title="你确定要同步数据吗？"
								onConfirm={() =>
									syncDataFun({
										carId: record?.carId,
									})
								}
								okText="确定"
								cancelText="取消">
								<Button type="link" size="small">
									同步
								</Button>
							</Popconfirm>
						</Permissions>
						{record?.carStatus === 2 ||
						record?.carStatus === 4 ||
						record?.carStatus === 7 ||
						record?.carStatus === 8 ||
						record?.carStatus === 9 ? (
							<Permissions permissionID="amc_assetCenter_carMessage_list_edit">
								<Button
									type="link"
									size="small"
									onClick={() => {
										history.push({
											pathname: '/carMessage/list/edit',
											query: {
												id: record.carId,
												operationType:
													record.operationType,
												vin: record.vin,
											},
										})
									}}>
									编辑
								</Button>
							</Permissions>
						) : null}
						{record?.carStatus === 2 ? (
							<Permissions permissionID="amc_assetCenter_carMessage_list_standby">
								<Popconfirm
									placement="topLeft"
									title="你确定要更新数据状态吗？"
									onConfirm={() =>
										updateStatusFun({
											carId: record?.carId,
											operationStatus: 1,
											vehicleStatus: record.vehicleStatus,
										})
									}
									okText="确定"
									cancelText="取消">
									<Button type="link" size="small">
										备车
									</Button>
								</Popconfirm>
							</Permissions>
						) : null}
						{record?.carStatus === 4 ? (
							<Permissions permissionID="amc_assetCenter_carMessage_list_platoon">
								<Popconfirm
									placement="topLeft"
									title="你确定要更新数据状态吗？"
									onConfirm={() =>
										updateStatusFun({
											carId: record?.carId,
											operationStatus: 2,
											vehicleStatus: record.vehicleStatus,
										})
									}
									okText="确定"
									cancelText="取消">
									<Button type="link" size="small">
										排车
									</Button>
								</Popconfirm>
							</Permissions>
						) : null}
						{record?.carStatus === 7 ? (
							<>
								<Permissions permissionID="amc_assetCenter_carMessage_list_cancelPlatoon">
									<Popconfirm
										placement="topLeft"
										title="你确定要更新数据状态吗？"
										onConfirm={() =>
											updateStatusFun({
												carId: record?.carId,
												operationStatus: 3,
												vehicleStatus:
													record.vehicleStatus,
											})
										}
										okText="确定"
										cancelText="取消">
										<Button type="link" size="small">
											取消排车
										</Button>
									</Popconfirm>
								</Permissions>
								<Permissions permissionID="amc_assetCenter_carMessage_list_start">
									<Popconfirm
										placement="topLeft"
										title="你确定要更新数据状态吗？"
										onConfirm={() =>
											updateStatusFun({
												carId: record?.carId,
												operationStatus: 4,
												vehicleStatus:
													record.vehicleStatus,
											})
										}
										okText="确定"
										cancelText="取消">
										<Button type="link" size="small">
											发车
										</Button>
									</Popconfirm>
								</Permissions>
							</>
						) : null}
						{record?.carStatus === 2 ||
						record?.carStatus === 4 ||
						record?.carStatus === 9 ? (
							<Permissions permissionID="amc_assetCenter_carMessage_list_withdraw">
								<Popconfirm
									placement="topLeft"
									title="你确定要更新数据状态吗？"
									onConfirm={() =>
										updateStatusFun({
											carId: record?.carId,
											operationStatus: 6,
											vehicleStatus: record.vehicleStatus,
										})
									}
									okText="确定"
									cancelText="取消">
									<Button type="link" size="small">
										退出运营
									</Button>
								</Popconfirm>
							</Permissions>
						) : null}
					</div>
				),
			},
		]
		// 退运车辆列表
		const returnColumns: ColumnsType<TargetAPI.TargetColumns> = [
			{
				title: '序号',
				dataIndex: 'order',
				align: 'center',
				width: 70,
				render(text, record, index) {
					return (
						<span>
							{(otherParams.current - 1) * 10 + index + 1}
						</span>
					)
				},
			},
			{
				title: '车辆ID',
				dataIndex: 'carId',
				align: 'center',
				width: 200,
				render: (text) => <span>{text || '--'}</span>,
			},
			{
				title: '车架号',
				dataIndex: 'vin',
				align: 'center',
				width: 140,
				render: (text) => <span>{text || '--'}</span>,
			},
			{
				title: '车牌号',
				dataIndex: 'number',
				align: 'center',
				width: 150,
				render: (text) => <span>{text || '--'}</span>,
			},
			{
				title: '品牌车系车型',
				dataIndex: 'fashionName',
				align: 'center',
				width: 150,
				render: (text) => <span>{text || '--'}</span>,
			},
			{
				title: '车辆状态',
				dataIndex: 'carStatus',
				align: 'center',
				width: 150,
				render: (text: any, record: any) => (
					<>
						{carStatus?.map((tag: {key: number; label: string}) => {
							if (tag.key === text) {
								return (
									<Tag color="processing" key={record?.id}>
										{tag.label}
									</Tag>
								)
							}
							return ''
						})}
					</>
				),
			},
			{
				title: '持有方',
				dataIndex: 'holderName',
				align: 'center',
				width: 200,
				render: (text) => <span>{text || '--'}</span>,
			},
			{
				title: '资产所有方',
				dataIndex: 'assertsOwnerName',
				align: 'center',
				width: 200,
				render: (text) => <span>{text || '--'}</span>,
			},
			{
				title: '所属公司',
				dataIndex: 'companyName',
				align: 'center',
				width: 150,
				render: (text) => <span>{text || '--'}</span>,
			},
			{
				title: '所有人',
				dataIndex: 'owner',
				align: 'center',
				width: 150,
				render: (text) => <span>{text || '--'}</span>,
			},
			{
				title: '城市',
				dataIndex: 'cityName',
				align: 'center',
				width: 150,
				render: (text) => <span>{text || '--'}</span>,
			},
			{
				title: '运营分类',
				dataIndex: 'operationType',
				align: 'center',
				width: 150,
				render: (text: any, record: any) => (
					<>
						{text
							? operationType?.map(
									(tag: {key: number; label: string}) => {
										if (tag.key === text) {
											return (
												<Tag
													color="processing"
													key={record?.id}>
													{tag.label}
												</Tag>
											)
										}
										return ''
									},
							  )
							: '--'}
					</>
				),
			},
			{
				title: '操作',
				key: 'action',
				align: 'center',
				fixed: 'right',
				width: 250,
				render: (text: any, record: any) => (
					<div>
						<Permissions permissionID="amc_assetCenter_carMessage_list_sync">
							<Popconfirm
								placement="topLeft"
								title="你确定要同步数据吗？"
								onConfirm={() =>
									syncDataFun({
										carId: record?.carId,
									})
								}
								okText="确定"
								cancelText="取消">
								<Button type="link" size="small">
									同步
								</Button>
							</Popconfirm>
						</Permissions>
						<Permissions permissionID="amc_assetCenter_carMessage_list_view">
							<Button
								type="link"
								size="small"
								onClick={() => {
									history.push({
										pathname: '/carMessage/list/view',
										query: {
											id: record.carId,
											operationType: record.operationType,
											vin: record.vin,
										},
									})
								}}>
								查看
							</Button>
						</Permissions>
					</div>
				),
			},
		]

		// 初始化分页
		useEffect(() => {
			const param = {
				current: 1,
				size: 10,
			}
			setParams(() => param)
		}, [searchData])

		useEffect(() => {
			const param = {
				current: 1,
				size: 10,
			}
			setOtherParams(() => param)
		}, [otherSearchData])

		const onFinish = (values: any) => {
			setSearchData(values)
		}
		const onOtherFinish = (values: any) => {
			setOtherSearchData(values)
		}

		// 搜索全部车辆重置
		const onReset = () => {
			setSearchData({})
		}

		// 搜索退运车辆重置
		const onOtherReset = () => {
			setOtherSearchData({})
		}

		useEffect(() => {
			const formItems: any[] = [
				{
					type: 'group',
					key: 'group1',
					groupItems: [
						{
							type: 'select',
							label: '持有方',
							name: 'holderId',
							key: 'holderId',
							keys: 'value',
							title: 'valueName',
							items: [...holderDict],
						},
						{
							type: 'select',
							key: 'operationType',
							name: 'operationType',
							label: '运营分类',
							keys: 'key',
							title: 'label',
							items: [...operationType],
						},
						{
							type: 'treeSelect',
							label: '资产所有方',
							name: 'assertsOwnerId',
							key: 'assertsOwnerId',
							keys: 'id',
							title: 'name',
							treeData: [...orgList],
						},
					],
				},
				{
					type: 'group',
					key: 'group2',
					groupItems: [
						{
							type: 'input',
							label: '车辆ID',
							name: 'carId',
							key: 'carId',
							rules: [
								{
									pattern: /^[0-9]*$/,
									message: '车辆ID请输入数字',
								},
							],
						},
						{
							type: 'select',
							key: 'fashionId',
							name: 'fashionId',
							label: '品牌车系车型',
							keys: 'id',
							title: 'fullName',
							items: [...carTypeList],
						},
						{
							type: 'input',
							label: '车架号',
							name: 'vin',
							key: 'vin',
						},
					],
				},
				{
					type: 'group',
					key: 'group3',
					groupItems: [
						{
							type: 'input',
							label: '车牌号',
							name: 'number',
							key: 'number',
						},
						{
							type: 'select',
							key: 'carStatus',
							name: 'carStatus',
							label: '车辆状态',
							keys: 'key',
							title: 'label',
							items: [...carStatus],
						},
						{
							type: 'select',
							key: 'violationStatus',
							name: 'violationStatus',
							label: '违章状态',
							keys: 'key',
							title: 'label',
							items: [...violationStatus],
						},
					],
				},
				{
					type: 'group',
					key: 'group4',
					groupItems: [
						{
							type: 'select',
							key: 'repairStatus',
							name: 'repairStatus',
							label: '维修状态',
							keys: 'key',
							title: 'label',
							items: [...repairStatus],
						},
						{
							type: 'select',
							key: 'motStatus',
							name: 'motStatus',
							label: '年检状态',
							keys: 'key',
							title: 'label',
							items: [...motStatus],
						},
						{
							type: 'select',
							key: 'maintenanceStatus',
							name: 'maintenanceStatus',
							label: '保养状态',
							keys: 'key',
							title: 'label',
							items: [...maintenanceStatus],
						},
					],
				},
				{
					type: 'group',
					key: 'group5',
					groupItems: [
						{
							type: 'select',
							key: 'commercialInsuranceStatus',
							name: 'commercialInsuranceStatus',
							label: '商业险状态',
							keys: 'key',
							title: 'label',
							items: [...commercialInsuranceStatus],
						},
						{
							type: 'select',
							key: 'compulsoryInsuranceStatus',
							name: 'compulsoryInsuranceStatus',
							label: '交强险状态',
							keys: 'key',
							title: 'label',
							items: [...compulsoryInsuranceStatus],
						},
						{
							type: 'select',
							key: 'compliance',
							name: 'compliance',
							label: '是否网约车',
							keys: 'key',
							title: 'label',
							items: [...compliance],
						},
					],
				},
				{
					type: 'group',
					key: 'group6',
					groupItems: [
						{
							type: 'select',
							key: 'isCarHailingCheck',
							name: 'isCarHailingCheck',
							label: '网约车运营检',
							keys: 'key',
							title: 'label',
							items: [...isCarHailingCheck],
						},
						{
							type: 'select',
							key: 'onlineCarLicenseStatus',
							name: 'onlineCarLicenseStatus',
							label: '网约车证',
							keys: 'key',
							title: 'label',
							items: [...onlineCarLicenseStatus],
						},
						{
							type: 'select',
							key: 'carLicenseStatus',
							name: 'carLicenseStatus',
							label: '行驶证',
							keys: 'key',
							title: 'label',
							items: [...carLicenseStatus],
						},
					],
				},
				{
					type: 'group',
					key: 'group7',
					groupItems: [
						{
							type: 'select',
							key: 'vehicleStatus',
							name: 'vehicleStatus',
							label: '车务状态',
							keys: 'key',
							title: 'label',
							items: [...vehicleStatus],
						},
						{},
						{},
					],
				},
			]
			setFormData(formItems)
		}, [
			orgList,
			isCarHailingCheck,
			onlineCarLicenseStatus,
			carLicenseStatus,
			compliance,
			compliance,
			compulsoryInsuranceStatus,
			commercialInsuranceStatus,
			operationType,
			carStatus,
			violationStatus,
			repairStatus,
			motStatus,
			maintenanceStatus,
			carTypeList,
		])

		// useEffect(() => {
		// 	const formItems: any[] = [
		// 		{
		// 			type: 'group',
		// 			key: 'group7',
		// 			groupItems: [
		// 				{
		// 					type: 'select',
		// 					label: '持有方',
		// 					name: 'holderId',
		// 					key: 'holderId',
		// 					keys: 'value',
		// 					title: 'valueName',
		// 					items: [...holderDict],
		// 				},
		// 				{
		// 					type: 'select',
		// 					key: 'operationType',
		// 					name: 'operationType',
		// 					label: '运营分类',
		// 					keys: 'key',
		// 					title: 'label',
		// 					items: [...operationType],
		// 				},
		// 				{
		// 					type: 'treeSelect',
		// 					label: '资产所有方',
		// 					name: 'assertsOwnerId',
		// 					key: 'assertsOwnerId',
		// 					keys: 'id',
		// 					title: 'name',
		// 					treeData: [...orgList],
		// 				},
		// 			],
		// 		},
		// 		{
		// 			type: 'group',
		// 			key: 'group8',
		// 			groupItems: [
		// 				{
		// 					type: 'input',
		// 					label: '车辆ID',
		// 					name: 'carId',
		// 					key: 'carId',
		// 					rules: [
		// 						{
		// 							pattern: /^[0-9]*$/,
		// 							message: '车辆ID请输入数字',
		// 						},
		// 					],
		// 				},
		// 				{
		// 					type: 'select',
		// 					key: 'fashionId',
		// 					name: 'fashionId',
		// 					label: '品牌车系车型',
		// 					keys: 'id',
		// 					title: 'fullName',
		// 					items: [...carTypeList],
		// 				},
		// 				{
		// 					type: 'input',
		// 					label: '车架号',
		// 					name: 'vin',
		// 					key: 'vin',
		// 				},
		// 			],
		// 		},
		// 		{
		// 			type: 'group',
		// 			key: 'group9',
		// 			groupItems: [
		// 				{
		// 					type: 'input',
		// 					label: '车牌号',
		// 					name: 'number',
		// 					key: 'number',
		// 				},
		// 				{},
		// 				{},
		// 			],
		// 		},
		// 	]
		// 	setOtherFormData(formItems)
		// }, [orgList, operationType])

		// 批量导入车辆
		const importData = () => {
			const formdata = new FormData()
			formdata.append('file', fileObj)
			formdata.append('type', '5')
			importSave(formdata)
				.then((res: any) => {
					if (res?.success) {
						message.success(res.msg)
						setIsModalOpen(() => false)
						onAllListFun()
					}
				})
				.catch((error: any) => {
					message.error(error)
					setIsModalOpen(() => false)
				})
		}

		// 获取导入失败表格数据
		const onTableList = (data: any) =>
			getErrorList({...data}).then((res: any) => {
				if (res?.success) {
					return res
				}
				return []
			})

		// 批量导入车辆图片取消
		const carImgModalOpen = () => {
			setIsCarImgModalOpen(() => false)
		}
		const resetList = () => {
			const param = {
				current: 1,
				size: 10,
			}
			setParams(() => param)
			setOtherParams(() => param)
		}
		const onTabsChange = (key: string) => {
			setTabsKey(() => key)
			setSearchData(() => {})
			setOtherSearchData(() => {})
			resetList()
		}

		// 批量图片上传
		const importImgData = (fileList: any) => {
			const positionReg = [
				{key: '1', label: '前'},
				{key: '2', label: '后'},
				{key: '3', label: '左'},
				{key: '4', label: '右'},
			]
			const fileLists = fileList.map((item: any) => {
				const arr = item?.response?.data?.filename?.split('.')
				return {
					carPlateNo: arr[0],
					type: positionReg?.filter(
						(positionItem: {key: string; label: string}) =>
							positionItem.label === arr[1],
					)[0].key,
					giftKey: item?.response?.data?.id,
				}
			})
			importBatchImg({carImgList: fileLists})
				.then((res) => {
					if (res?.success) {
						message.success(res.msg)
						setIsCarImgModalOpen(() => false)
						resetList()
					}
				})
				.catch((err) => {
					message.error(err)
				})
		}
		return (
			<div className={styles.page}>
				<div className="search">
					{tabsKey === '1' ? (
						<SearchForm
							key="1"
							onFinish={onFinish}
							onReset={onReset}
							formItems={formData}
							formLayout={formItemLayout}
						/>
					) : (
						<SearchForm
							key="2"
							onFinish={onOtherFinish}
							onReset={onOtherReset}
							formItems={formData}
							formLayout={formItemLayout}
						/>
					)}
				</div>
				<div className="btnlist">
					<Space size={12}>
						<Button
							type="primary"
							ghost
							size="small"
							onClick={() => {
								setIsModalOpen(() => true)
							}}>
							批量导入车辆
						</Button>
						<Button
							type="primary"
							ghost
							size="small"
							onClick={() => {
								setIsCarImgModalOpen(() => true)
							}}>
							批量导入车辆图片
						</Button>
						<Button
							ghost
							size="small"
							className="btn_warning"
							onClick={() => {
								downloadDocumentUrl({
									resourceId: '110',
									queryDesc: '车辆列表导出,resourceId:110',
									queryParam:
										tabsKey === '1'
											? searchData
											: otherSearchData,
								})
							}}>
							导出
						</Button>
					</Space>
				</div>
				<div className={styles.tabs}>
					<Tabs
						type="card"
						activeKey={tabsKey}
						onChange={onTabsChange}
						items={[
							{
								label: '全部车辆',
								key: '1',
								children: (
									<>
										<CustomTable
											key="1"
											kid="carId"
											params={params}
											columns={allColumns}
											pagination
											total={total}
											callback={(pagination: any) => {
												setParams(pagination)
											}}
											pageSizeOptionsKey="1"
											loading={loading}
											dataSource={tableList}
										/>
									</>
								),
							},
							{
								label: '退运车辆',
								key: '2',
								children: (
									<CustomTable
										key="2"
										kid="carId"
										params={otherParams}
										columns={returnColumns}
										pagination
										total={otherTotal}
										callback={(pagination: any) => {
											setOtherParams(pagination)
										}}
										pageSizeOptionsKey="2"
										loading={otherLoading}
										dataSource={otherTableList}
									/>
								),
							},
						]}
					/>
				</div>
				<BatchUpload
					isModalOpen={isModalOpen}
					setIsModalOpen={setIsModalOpen}
					setFileObj={setFileObj}
					importData={importData}
					onTableList={onTableList}
					fileNmae="file"
					kid="id"
					uploadFileUrl={importCheck}
					columns={batchColumns}
					sourceId={9}
					templateType="车辆列表"
				/>
				<BatchUploadImg
					title="批量导入车辆图片"
					isModalOpen={isCarImgModalOpen}
					setIsModalOpen={carImgModalOpen}
					accept={['image/jpeg', 'image/png']}
					moreNum={50}
					fileNmae={fileName}
					fileData={{
						modelName: 'carList',
						targetAttr: 0,
					}}
					importData={importImgData}
					uploadFileUrl={uploadFileUrl}
				/>
			</div>
		)
	},
)

export default connect(({user}: any) => ({
	user,
}))(listDom)
